<!--用户登录-->
<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link  rel="stylesheet" type="text/css" href="login.css"/>
    <link  rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
    <title>用户登录</title>
</head>
<body>
<!--<header class="mui-bar mui-bar-nav">-->
    <!--<h1 class="mui-title">中车通</h1>-->
<!--</header>-->
<div class="mine-login-box">
    <div class="mine-login-row">
        <div class="mui-col mui-col-xs-4"></div>
        <div class="mui-col mui-col-xs-4">
            <img class="mine-login-car" src="../../../images/mine/subway.png"/>
        </div>
        <div class="mui-col mui-col-xs-4"></div>
    </div>
    <div class="mine-login-row">
        <div class="mui-col mui-col-xs-4"></div>
        <div class="mui-col mui-col-xs-4">
            <h1 class="mine-login-t1">中车通</h1>
        </div>
        <div class="mui-col mui-col-xs-4"></div>
    </div>

    <div class="mine-login-row">
        <div class="mui-col mui-col-xs-11">
            <form class="mui-input-group" style="background: rgba(0,0,0,0); border: 1px solid #85889d; border-radius: 5px;">
                <div class="mui-input-row">
                    <label style="color: #fff;">用户名</label>
                    <input type="text" style="color: #fff;" class="mui-input-clear" placeholder="请输入用户名">
                </div>
                <div class="mui-input-row">
                    <label style="color: #fff;">密码</label>
                    <input type="password" style="color: #fff;" class="mui-input-password" placeholder="请输入密码">
                </div>
            </form>
            <button type="button" style="width: 100%;margin-top: 10px;" class="mui-btn mui-btn-primary">确认</button>
        </div>
    </div>
    <div class="mine-login-row mine-login-t2">
        <div class="mui-col mui-col-xs-6"><a href="#" style="color: #fff;text-decoration:none;">注册账号</a></div>
        <div class="mui-col mui-col-xs-6"><a href="#" style="color: #fff;text-decoration:none;">忘记密码</a></div>
    </div>
    <div class="mine-login-row2 mine-login-t3">
        <div class="mui-col mui-col-xs-4"><hr class="mine-login-hr"/></div>
        <div class="mui-col mui-col-xs-4">第三方账号登录</div>
        <div class="mui-col mui-col-xs-4"><hr class="mine-login-hr"/></div>
    </div>
    <div class="mine-login-row mine-login-t3">
        <div class="mui-col mui-col-xs-4"><img class="mine-login-img" src="../../../images/mine/QQ.png"/></div>
        <div class="mui-col mui-col-xs-4"><img class="mine-login-img" src="../../../images/mine/weixin.png"/></div>
        <div class="mui-col mui-col-xs-4"><img class="mine-login-img" src="../../../images/mine/weibo.png"/></div>
    </div>
</div>

<script src="../../../js/mui.min.js"></script>
<script src="../../../js/mui.enterfocus.js"></script>
<script src="../../../js/app.js"></script>
<script>
    /*
    * @param $ -->mui
    * @param doc -->document
    * */
    (function($, doc){
        //初始化  statusBarBackground设置状态栏颜色
        $.init({
            statusBarBackground: '#009cd8'
        });
        $.plusReady(function(){
            plus.screen.lockOrientation("portrait-primary"); //定义屏幕方向
            var settings = app.getSettings();
            var state = app.getState();
            var mainPage = $.preload({
                "id": 'mapline',
                "url": '../../ticket/mapshow/mapline.html'
            });
            var toMain = function() {
                /*
                * mui.fire(target,event,data)
                * 预加载时使用mui.fire()传值
                * @param target是需要接受参数的webview对象，而不是id
                * */
                $.fire(mainPage, 'show', null);
//                登陆按钮监听事件中的success方法
                setTimeout(function() {
                    $.openWindow({
                        id: 'city',
                        show: {
                            aniShow: 'pop-in'
                        },
                        waiting: {
                            autoShow: false
                        }
                    });
                }, 0);
            };

            //检查 "登录状态/锁屏状态" 开始
//            if (settings.autoLogin && state.token && settings.gestures) {
//                $.openWindow({
//                    url: 'unlock.html',
//                    id: 'unlock',
//                    show: {
//                        aniShow: 'pop-in'
//                    },
//                    waiting: {
//                        autoShow: false
//                    }
//                });
//            } else if (settings.autoLogin && state.token) {
//                toMain();
//            } else {
                //第三方登录
//                var auths = {};
//                var oauthArea = doc.querySelector('.oauth-area');
//                plus.oauth.getServices(function(services) {
//                    for (var i in services) {
//                        var service = services[i];
//                        auths[service.id] = service;
//                        var btn = document.createElement('div');
//                        btn.setAttribute('class', 'oauth-btn');
//                        btn.authId = service.id;
//                        btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
//                        //alert(service.id);
//                        //btn.innerText = service.description + "登录";
//                        oauthArea.appendChild(btn);
//                    }
//                    $(oauthArea).on('tap', '.oauth-btn', function() {
//                        var auth = auths[this.authId];
//                        var waiting = plus.nativeUI.showWaiting();
//                        auth.login(function() {
//                            waiting.close();
//                            plus.nativeUI.toast("登录认证成功");
//                            //alert(JSON.stringify(auth.authResult));
//                            auth.getUserInfo(function() {
//                                plus.nativeUI.toast("获取用户信息成功");
//                                //alert(JSON.stringify(auth.userInfo));
//                                var name = auth.userInfo.nickname || auth.userInfo.name;
//                                app.createState(name, function() {
//                                    toMain();
//                                });
//                            }, function(e) {
//                                plus.nativeUI.toast("获取用户信息失败：" + e.message);
//                            });
//                        }, function(e) {
//                            waiting.close();
//                            plus.nativeUI.toast("登录认证失败：" + e.message);
//                        });
//                    });
//                }, function(e) {
//                    oauthArea.style.display = 'none';
//                    plus.nativeUI.toast("获取登录认证失败：" + e.message);
//                });
//            }

            // close splash
            setTimeout(function() {
                //关闭 splash
                plus.navigator.closeSplashscreen();
            }, 600);
            var loginButton = doc.getElementById('login');
            var accountBox = doc.getElementById('account');
            var passwordBox = doc.getElementById('password');
//            var autoLoginButton = doc.getElementById("autoLogin");
            var regButton = doc.getElementById('reg');//注册
            var forgetButton = doc.getElementById('forgetPassword');
            loginButton.addEventListener('tap', function(event) {
                var loginInfo = {
                    account: accountBox.value,
                    password: passwordBox.value
                };
                app.login(loginInfo, function(err) {
                    if (err) {
                        plus.nativeUI.toast(err);
                        return;
                    }
                    toMain();
                });
            });
            $.enterfocus('#login-form input', function() {
                $.trigger(loginButton, 'tap');
            });
//            注册
            regButton.addEventListener('tap', function(event) {
                $.openWindow({
                    url: '../register/register.html',
                    id: 'reg',
                    show: {
                        aniShow: 'pop-in'
                    },
                    styles: {
                        popGesture: 'hide'
                    },
                    waiting: {
                        autoShow: false
                    }
                });
            }, false);

            forgetButton.addEventListener('tap', function(event) {
                $.openWindow({
                    url: 'forgotPassword.html',
                    id: 'forgotPassword',
                    show: {
                        aniShow: 'pop-in'
                    },
                    styles: {
                        popGesture: 'hide'
                    },
                    waiting: {
                        autoShow: false
                    }
                });
            }, false);
//            第三方
//            window.addEventListener('resize', function() {
//                oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
//            }, false);
            //
            var backButtonPress = 0;
            $.back = function(event) {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            };
        });
    }(mui, document));
</script>
</body>
</html>